import React from 'react'
import { useLocation } from 'react-router-dom'
import './Xiang.css'
import { useNavigate } from 'react-router-dom'

export default function Xiang() {
  const location = useLocation()
  const navigate = useNavigate()
  const item = location.state
  return (
    <div>
      {item ? (
        <div>
          <img className='img2' src={item.img2} />
        </div>
      ) : (
        <p>加载数据失败</p>
      )}
      <div className='modal-box'>
        <p className='p2'>{item.name}</p>
        <div style={{ width: '320px', height: '40px', borderBottom: '1px solid black', marginLeft: '20px' }}>
          <p className='p3'>{item.tab}</p>
        </div>
        <img style={{ width: '40px', height: '40px', borderRadius: '50%', position: 'absolute', left: '20px', top: '120px' }} src='https://img1.baidu.com/it/u=762101408,667249160&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750' />
        <img style={{ width: '40px', height: '40px', borderRadius: '50%', position: 'absolute', left: '50px', top: '120px' }} src='https://img0.baidu.com/it/u=3814727917,1329903747&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=755' />
        <img style={{ width: '40px', height: '40px', borderRadius: '50%', position: 'absolute', left: '80px', top: '120px' }} src='https://q1.itc.cn/q_70/images03/20240621/4f1119e449814befa4f190b28b66b9c4.png' />
        <img style={{ width: '40px', height: '40px', borderRadius: '50%', position: 'absolute', left: '110px', top: '120px' }} src='https://img1.baidu.com/it/u=3083562354,1422945110&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200' />
        <span style={{ position: 'absolute', top: '130px', left: '190px', fontSize: '15px' }}>查看更多非遗传承人</span>
        <img onClick={() => { navigate('/cc') }} style={{ width: '20px', height: '20px', position: 'absolute', right: '10px', top: '130px' }} src='https://img0.baidu.com/it/u=1354183419,425351309&fm=253&fmt=auto&app=138&f=JPEG?w=342&h=342' />
      </div>
      <div className='content-box'>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;{item.content1}</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;{item.content2}</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;{item.content3}</p>
      </div>
      <svg style={{ width: '35px', position: 'fixed', top: '-70px', left: '10px' }} onClick={() => { navigate('/app/xun') }} t="1739775250572" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9438" width="200" height="200"><path d="M514 114.3c-219.9 0-398.8 178.9-398.8 398.9C115.2 733.1 294.1 912 514 912s398.8-178.9 398.8-398.8S733.9 114.3 514 114.3zM694 572H465.3l63.8 63.8c22.9 22.9 22.9 60.2 0 83.1-22.9 22.9-60.2 22.9-83.1 0L281.9 554.7c-22.9-22.9-22.9-60.2 0-83.1L446 307.5c22.9-22.9 60.2-22.9 83.1 0 11.5 11.5 17.2 26.5 17.2 41.5s-5.7 30.1-17.2 41.5l-63.8 63.8H694c32.5 0 58.8 26.3 58.8 58.8S726.5 572 694 572z" fill="#1296db" p-id="9439"></path></svg>
    </div>
  )
}
